<!DOCTYPE html>
<html lang="zh-Hant">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DAIJH.Feedback.notification() 功能測試</title>

  <link rel="stylesheet" href="./DAIJH.notification.css">

  <style>
    /* 頁面基本樣式 (用於美化測試頁面) */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      padding: 20px;
      background-color: #f4f4f5;
      color: #333;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
      margin-top: 0;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 20px;
    }

    button {
      font-size: 16px;
      padding: 10px 18px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      color: white;
      transition: background-color 0.2s ease, transform 0.1s ease;
    }

    button:active {
      transform: scale(0.98);
    }

    #testSuccess {
      background-color: #67c23a;
    }

    #testWarningHtml {
      background-color: #e6a23c;
    }

    #testErrorPosition {
      background-color: #f56c6c;
    }

    #testInfoNoClose {
      background-color: #909399;
    }

    #testCallback {
      background-color: #409eff;
    }

    button:hover {
      filter: brightness(1.1);
    }
  </style>
</head>

<body>

  <div class="container">
    <h1>DAIJH Notification 功能測試</h1>
    <p>點擊下方按鈕以觸發不同類型的通知。</p>
    <div class="button-group">
      <button id="testSuccess">顯示成功訊息 (右上)</button>
      <button id="testWarningHtml">顯示警告訊息 (含HTML)</button>
      <button id="testErrorPosition">顯示錯誤訊息 (左下)</button>
      <button id="testInfoNoClose">顯示提示訊息 (手動關閉)</button>
      <button id="testCallback">顯示帶有回調的訊息</button>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script src="./DAIJH.notification.js"></script>

  <script>
    $(document).ready(function () {
      // 測試 1: 顯示成功訊息
      $('#testSuccess').click(function () {
        DAIJH.Feedback.notification({
          title: '成功',
          message: '您的操作已成功完成！',
          type: 'success'
        });
      });

      // 測試 2: 顯示含 HTML 的警告訊息
      $('#testWarningHtml').click(function () {
        DAIJH.Feedback.notification({
          title: '警告',
          message: '這是一個 <strong>重要</strong> 的警告。<br>請仔細閱讀內容。',
          type: 'warning',
          duration: 6000
        });
      });

      // 測試 3: 顯示不同位置的錯誤訊息
      $('#testErrorPosition').click(function () {
        DAIJH.Feedback.notification({
          title: '錯誤',
          message: '加載資源失敗，請檢查您的網絡連接。',
          type: 'error',
          position: 'left-bottom' // 改變位置
        });
      });

      // 測試 4: 顯示不會自動關閉的提示
      $('#testInfoNoClose').click(function () {
        DAIJH.Feedback.notification({
          title: '提示',
          message: '此訊息需要手動關閉。',
          type: 'info',
          duration: 0 // 設置為 0 表示不自動關閉
        });
      });

      // 測試 5: 測試回調函數
      $('#testCallback').click(function () {
        DAIJH.Feedback.notification({
          title: '回調測試',
          message: '當此通知關閉時，將會有彈窗提示。',
          type: 'info',
          callback: function () {
            console.log('通知已經關閉！ Callback 函數已執行。');
            alert('通知已關閉，回調觸發！');
          }
        });
      });
    });
  </script>

</body>

</html>